<template>
	<view class="detail">
		<router-view />
		<detail-nav-bar class="fixed-top" ref="navbar" @titleClick="titleClick" :cursor="cursor" />
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- #ifdef MP-WEIXIN || APP -->
		<view style="margin-top: 190rpx;">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view style="margin-top: 90rpx;">
				<!-- #endif -->
				<scroll-view :show-scrollbar="false" scroll-y="true">

					<swiper class="swiper-box">
						<swiper-item v-for="(item, index) in swiperImage" :key="index" class="swiper-image">
							<image class="image" :src="item" mode="heightFix" />
						</swiper-item>
					</swiper>


					<detail-base-info v-if="goodInfo" :goodInfo="goodInfo" :goodId="goodId" :shopId="shopId"
						:goodObj="goodObj" />

					<detail-shop-info v-if="shopInfo" :shopInfo="shopInfo" ref="shop" />

					<detail-good-more v-if="goodImages" :goodImages="goodImages"
						@detailGoodResourceLoad="updateOffsetTop" />

					<detail-params v-if="goodParams" ref="params" class="params" :goodParams="goodParams"
						@detailGoodResourceLoad="updateOffsetTop" />

					<detail-comment ref="comment" class="comment" v-if="goodComment" :goodComment="goodComment"
						@detailGoodResourceLoad="updateOffsetTop" />

					<recommend ref="recommend" class="recommend" />
					<back-top @click.native="backTop" v-show="IsBottom"></back-top>
				</scroll-view>
				<detail-operation-bar @addShop="addGood" @buyNowGood="buyNowGood" v-if="done" :cover="cover"
					:price="price" />
			</view>

		</view>
</template>

<script>
	//detail子组件
	import DetailNavBar from "./childCpn/DetailNavBar";
	import DetailBaseInfo from "./childCpn/DetailBaseInfo";
	import DetailShopInfo from "./childCpn/DetailShopInfo";
	import DetailParams from "./childCpn/DetailParams";
	import DetailGoodMore from "./childCpn/DetailGoodMore";
	import DetailComment from "./childCpn/DetailComment";
	import DetailOperationBar from "./childCpn/DetailOperationBar";

	//其他功能性组件
	import BackTop from "components/content/BackTop/BackTop";
	import Recommend from "components/common/Recommend/Recommend";


	//防抖
	import {
		debounce
	} from "common/utils";

	//获取数据的格式
	import {
		getGoodDetail,
		Goods,
		Shop
	} from "network/detail";

	//vuex映射
	import {
		mapGetters,
		mapMutations
	} from "vuex";

	//加入历史浏览记录

	export default {
		name: "Detail",
		components: {
			DetailNavBar,
			DetailBaseInfo,
			BackTop,
			DetailShopInfo,
			DetailGoodMore,
			DetailParams,
			DetailComment,
			DetailOperationBar,
			Recommend,

		},

		data() {
			return {
				goodId: null, //商品id
				swiperImage: null, //swiper图
				shopInfo: null, //商店信息
				goodInfo: null, //商品信息
				IsBottom: false, //backtop是否显示的tag
				goodImages: null, //商品展示图
				goodParams: null, //商品参数
				goodComment: null, //商品评论
				cartGoodInfo: {}, //加入购物车所需要的信息
				tagsY: [0], //每个tag对应着title具体的offsetHeight值以跳转
				updateOffsetTop: null, //经过防抖处理的更新tag的offsetTop的方法
				cursor: 0, //对应激活的title游标
				tag: 0, //接收title点击事件的index以跳到对应的内容
				done: false, //是否显示operationBar的标志
				goodObj: {}, //加入购物车所需信息
				shopId: null,
				size: [],
				cover: null,
				price: 0,
			};
		},

		// // #ifdef H5

		// created() {
		// 	this.goodId = this.$route.query.id;
		// 	console.log('created', this.goodId)
		// 	// #endif
		// 	// #ifdef MP
		// //#endif
		onLoad(option) {
			this.goodId = option.id;
			//获取商品详情页所需信息
			getGoodDetail(this.goodId)
				.then((res) => {
					const info = res[1].data.data;
					this.swiperImage = info.itemInfo.topImages;
					this.shopInfo = new Shop(info.shopInfo);
					this.goodInfo = new Goods(info.itemInfo, info.columns, info.services);
					this.price = this.goodInfo.realPrice;
					this.goodImages = info.detailInfo.detailImage[0].list;
					this.cover = this.swiperImage[0];
					this.goodParams = info.itemParams;
					this.goodComment = info.rate.list ? info.rate.list : [];
					this.cartGoodInfo = {
						goodId: this.goodId,
						belonging: info.shopInfo.shopId,
						price: this.goodInfo.realPrice,
						title: this.goodInfo.title,
						cover: this.swiperImage[0],
					};
					this.cartShopInfo = {
						shopId: info.shopInfo.shopId,
						shopName: info.shopInfo.name,
						shopLogo: info.shopInfo.shopLogo,
					};
					this.shopId = info.shopInfo.shopId;
					this.done = true;
					this.goodObj = {
						shopId: this.shopId,
						shop: this.cartShopInfo,
						goodId: this.goodId,
						good: this.cartGoodInfo,
					};

					//如果尚未记录
					if (!this.goodIfViewed(this.goodId)) {
						//本地存储浏览记录

						this.addGoodViewed({
							goodId: this.goodId,
							info: this.goodObj
						});
					}
				})
				.catch(() => {
					// this.$router.go(-1);
					this.back();
					this.warning("获取数据失败，请稍后刷新或检查网络问题");
				});
		},
		computed: {
			...mapGetters(["goodsIfFull", "goodIfViewed"]),
		},
		mounted() {


			//使用防抖实时刷新高度
			this.updateOffsetTop = debounce(() => {
				this.$nextTick(async () => {
					//获取各标题的Y轴位置
					// #ifdef H5 || APP
					if (this.$refs.params != undefined) {
						this.tagsY[1] = this.$refs.params.$el.offsetTop;
					}

					if (this.$refs.comment != undefined) {
						this.tagsY[2] = this.$refs.comment.$el.offsetTop;
					}
					if (this.$refs.recommend != undefined) {
						this.tagsY[3] = this.$refs.recommend.$el.offsetTop;
					}
					// #endif

					//#ifdef MP-WEIXIN
					await new Promise((resolve, reject) => {
						wx.createSelectorQuery().select('.params').boundingClientRect((
							rect) => {
							this.tagsY[1] = rect.top - 100 // 节点的上边界坐标
							resolve();
						}).exec()
					})

					await new Promise((resolve, reject) => {
						wx.createSelectorQuery().select('.comment').boundingClientRect(
							(rect) => {
								this.tagsY[2] = rect.top - 100 // 节点的上边界坐标
								resolve();
							}).exec()
					})

					await new Promise((resolve, reject) => {
						wx.createSelectorQuery().select('.recommend')
							.boundingClientRect((rect) => {
								this.tagsY[3] = rect.top - 100 // 节点的上边界坐标
								resolve();
							}).exec()
					})
					//#endif

				});
			}, 100);
		},
		onPageScroll(e) {
			this.IsBottom = this.pageHeight < e.scrollTop;
			//从倒数第二个往前遍历标题的y值,如果形参y值大于或等于对应的标题y值则代表在其位置上,设置正确的cursor为标题对应的下标
			for (let i = this.tagsY.length - 1; i; i--) {
				if (e.scrollTop >= this.tagsY[i]) {
					this.cursor = i;
					return;
				}
			}
			this.cursor = 0;
		},
		methods: {
			...mapMutations([
				"addShop",
				"goodCollected",
				"goodUnCollect",
				"addGoodViewed",
				"buyNow",
			]),
			//是否可以开启backtop


			//切换到对应的标题锚点
			titleClick(index) {
				this.tag = index;
			},

			addGood(count) {
				if (this.goodsIfFull) {
					this.warningMsg("购物车已满,添加失败,请先清空购物车");
				} else {
					this.goodObj.good["count"] = count;
					this.addShop(this.goodObj);
					this.success("加入购物车成功");
				}
			},

			buyNowGood(count) {
				let buyNowGoodObj = {},
					goods = {},
					info = this.cartShopInfo;
				goods[this.goodId] = {
					count,
					cover: this.cover,
					goodId: this.goodId,
					price: this.price,
					title: this.goodInfo.title,
				};
				buyNowGoodObj[this.shopId] = {
					goods,
					info,
				};
				this.goodObj.good["count"] = count;
				this.buyNow(buyNowGoodObj);
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/pages/cart/pay/ConfirmOrder?tag=1",
						fail(reason) {
							console.log(reason)
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/user/Login",
						fail(reason) {
							console.log(reason)
						}
					})
				}


				// this.$router.push("/cart/confirm/1");
			},
		},

		watch: {
			//滚动到对应的标题位置
			tag(newV) {
				console.log('滚动', this.tagsY[newV], typeof this.tagsY[newV]);
				uni.pageScrollTo({
					scrollTop: this.tagsY[newV]+1,
					duration: 300,
				});

			},
			"$route.query.id"(newV) {
				this.$router.go(0);
			},
		},
	};
</script>
<style lang="scss" scoped>
	.detail {

		.swiper-box {

			height: 560rpx;
			width: 100vw;

			.swiper-image {
				height: 560rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					width: 100%;
				}

			}

		}

	}
</style>
